<template>
  <div :class="styles['video-upload']">
    <VideoPlay :class="styles['icon']" v-if="props.modelValue.url" @click="playOpen = true"/>
    <plus :class="styles['icon']" v-else @click="showTips"/>
    <el-dialog
        :class="styles['dialog']"
        v-model="recordDialog.open"
        title="摄像界面示意图"
        width="550"
        center
        destroy-on-close
    >
      <p :class="styles['count']">计时：{{ currentTime }}</p>
      <video :class="styles['dialog-video']" ref="videoRef" autoplay :poster="VideoLinking"/>
      <template #footer>
        <el-button :type="recordDialog.isRecord ? 'danger' : 'primary'" size="large" class="ato-w160" @click="handleRecord">{{ recordDialog.isRecord ? '停止' : '录制' }}</el-button>
      </template>
    </el-dialog>
    <el-dialog
        v-model="playOpen"
        title="开箱视频"
        width="50%"
        center
        destroy-on-close
    >
      <video :class="styles['play-video']" autoplay controls :src="props.modelValue.url" v-if="props.modelValue.url"/>
    </el-dialog>
  </div>
</template>

<script setup name="VideoUpload">
import {ref, h, reactive, nextTick} from 'vue'
import { ElMessageBox } from 'element-plus'
import VideoLinking from '@/assets/images/video-linking.png'
import { Plus, VideoPlay } from '@element-plus/icons-vue'
import moment from 'moment'
import { useVideo } from '@/hooks'

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({
      url: '',
      id: ''
    })
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
// 视频播放弹窗
const playOpen = ref(false)
// 上传后文件的url
const fileUrl = ref('')
// 录制视频dom
const videoRef = ref(null)
// 摄像界面示意图
const recordDialog = reactive({
  open: false,
  isRecord: false
})
const currentTime = ref('')
const {openCamera, stop, start} = useVideo(videoRef)

// 显示上传视频操作提示
function showTips () {
  const step = [
    '第1步： 把未开封的快递放置与摄像头下；',
    '第2步： 快递面单，朝摄像头方向清晰露出；',
    '第3步： 轻轻划开快递箱；',
    '第4步： 取出一张卡牌，展示正反面；如此展示完快递箱内所有物品；',
    '第5步： 点击上传视频；'
  ]
  ElMessageBox({
    title: '开箱视频拍摄规范及步骤',
    message: h('div', null, step.map(tip => h('p', tip))),
    confirmButtonText: '我已知悉，开始录像',
    closeOnClickModal: false,
    autofocus: false
  }).then(() => {
    recordDialog.open = true
    nextTick(() => {
      // 开启摄像头
      openCamera()
    })
  })
}
// 开始停止录制
function handleRecord () {
  recordDialog.isRecord ? stop() : start()
  recordDialog.isRecord = !recordDialog.isRecord
}

setInterval(() => {
  currentTime.value = moment().format('YYYY-MM-DD HH:mm:ss')
}, 1000)

</script>

<style lang="less" src="./index.less" module="styles">
</style>
